<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">

	<ui:define name="pageTitle">#{out.index_title}</ui:define>

	<ui:define name="head-extra">
		<h:outputScript name="charts/charts.js" library="primefaces" />
		<h:outputStylesheet name="charts/charts.css" library="primefaces" />
	</ui:define>

	<ui:define name="content">

		<p:chart type="bar" model="#{partnerOrder.horizontalBarModel}"
			id="lineChart2" widgetVar="chart" />

		<p:commandButton type="button" value="#{leader_export_button}" icon="ui-icon-extlink"
			onclick="exportChart()" />
		<p:dialog widgetVar="dlg" showEffect="fade" modal="true"
			header="Chart as an Image" resizable="true">
			<p:outputPanel id="output" layout="block"
				style="width:800px;height:600px" />
		</p:dialog>

		<script type="text/javascript">
			function exportChart() {
				//export image
				$('#output').empty().append(PF('chart').exportAsImage());

				//show the dialog
				PF('dlg').show();
			}
		</script>

		<h:form id="dayForm">
			<p:outputLabel for="startDay" value="#{out.start_day}" />
			<p:calendar id="startDay" value="#{partnerOrder.startDay}"
				pattern="yyyy-MM-dd" mask="true" />
			<br />
			<br />
			<p:outputLabel for="endDay" value="#{out.end_day}" />
			<p:calendar id="endDay" value="#{partnerOrder.endDay}"
				pattern="yyyy-MM-dd" mask="true" />

			<h:commandButton value="#{out.leader_show}" update=":dayForm"
				actionListener="#{partnerOrder.refreshChart()}" ajax="true" />


		</h:form>

	</ui:define>
</ui:composition>
